<template>
  <div class="manage-demand" :class="fun.isIphone()?'pb-200':''">
    <c-title text="需求发布"></c-title>
    <p class="tip">发布信息</p>
    <template v-if="type == 1">
      <van-cell-group>
        <van-field required v-model="category_name" label="分类" readonly right-icon="arrow" @click="categoryShow = true" />
        <van-field required v-model="title" label="标题" />
        <van-field required v-model="form.timer" label="服务时间" readonly right-icon="arrow"
          @click="show_calendar_popup('time')" />
        <van-field required v-model="content" label="服务内容" />
        <van-field required v-model="service_fee" label="服务费用" />
        <van-field required readonly v-model="form.info_indate" label="信息有效期" aria-placeholder="请选择有效期"
          @click="show_calendar_popup('indate')" right-icon="arrow" />
        <van-field required @click="addressShow = true" readonly v-model="addressName" label="地址" right-icon="arrow"
          aria-placeholder="请选择所以在区域" />
        <van-field v-if="strShow" @click="streetShow = true" required readonly v-model="address_form.street" label="街道"
          aria-placeholder="请选择街道" right-icon="arrow" />
        <van-field required v-model="address" label="详细地址" />
        <van-field required readonly v-model="form.locationTitle" label="地理位置" placeholder="请选择所在位置">
          <template #right-icon>
            <i class="iconfont icon-order_locate" @click="toGeolocation"></i>
          </template>
        </van-field>
        <div class="name-box">
          <van-field v-model="realname" label="预约师傅" @input="input" aria-placeholder="请输入师傅姓名" />
          <img v-if="member_src" :src="member_src" class="name-photo" />
        </div>
      </van-cell-group>
      <div class="search-tip" v-if="show_skill_flag">
        <div class="box">
          <div class="flex-between mb-31" v-for="(item,i) in tips_list" :key="i" @click="choose_handle(item)">
            <span>{{item.realname}}</span>
            <div class="flex-between">
              <van-image width="1.125rem" height="1.125rem" round :src="item.personal_pic" />
              <span style="margin-left: 0.25rem;">ID:{{item.member_id}}</span>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <van-cell-group>
        <van-field required  :value="category_name" label="分类" readonly />
        <van-field required  :value="title" label="标题" readonly />
        <van-field required  :value="form.timer" label="服务时间" readonly />
        <van-field required  :value="content" label="服务内容" readonly />
        <van-field required  :value="service_fee" label="服务费用" readonly />
        <van-field required  readonly :value="form.info_indate" label="信息有效期" />
        <van-field required  readonly :value="addressName" label="地址" />
        <van-field readonly  required :value="address_form.street" label="街道" />
        <van-field required  :value="address" readonly label="详细地址" />
        <van-field :value="realname" readonly label="预约师傅" />
      </van-cell-group>
    </template>

    <div v-if="reason">
      <div class="reject" >
        <div  class="tip">驳回原因</div>
        <div class="reject-content">{{reason}}</div>
      </div>
      <div style="height: 0.9375rem;"></div>
    </div>


    <div class="btn" v-if="type" :class="{'b-60':reason}">
      <van-button v-if="type == 1 && !reason" block round color="#4978F8" @click="submit">提交</van-button>
      <div v-else style="display: flex; justify-content: flex-end;">
        <div  v-if="reason" class="reject-btn"  style="margin-right: 0.3125rem;" @click="submit_again">重新发布</div>
        <div @click="show_order" class="show-order">查看订单</div>
      </div>
    </div>

    <!-- 有效期选择器 -->
    <van-popup v-model="showCalendar" round position="bottom">

      <div class="flex-between p32-40">
        <span @click="showCalendar = false" class="fz24 c999">取消</span>
        <span class="fz30 fw-bold">预约时间</span>
        <span @click="close_calendar_popup" class="fz24">确认</span>
      </div>
      <c-calendar ref="calendar" :options="options" :events="calendarEvents" @select="selectedDay"
        @monthChanged="monthChanged">
      </c-calendar>

      <div style="margin: 0.625rem;" class="time-indate" v-if="time_type == 'time'">
        <van-datetime-picker v-model="startTime" type="time" :min-hour="0" :max-hour="24" @change="change_start" />
        <span>至</span>
        <van-datetime-picker v-model="endTime" type="time" @change="change_end" :min-hour="0" :max-hour="24" />
      </div>

    </van-popup>


    <van-popup v-model="categoryShow" round position="bottom">
      <div class="catrogey-popuop">
        <div class="flex-between p32-40">
          <span @click="categoryShow = false" class="fz24 c999">取消</span>
          <span class="fz30 fw-bold">分类</span>
          <span @click="confirm" class="fz24">确认</span>
        </div>
        <van-radio-group v-model="radio">
          <van-cell-group>
            <van-cell v-for="item in list" :key="item.id" :title="item.title" clickable @click="radio = item.id">
              <template #right-icon>
                <van-radio :name="item.id">
                </van-radio>
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>

      </div>
    </van-popup>


    <!-- 省市区地址选择器 s -->
    <yd-cityselect style="height: 80%; z-index: 1000000;" v-model="addressShow" :callback="addressCallback"
      :items="district"></yd-cityselect>
    <!-- 省市区地址选择器 end -->
    <!-- 街道选择器 s -->
    <van-popup v-model="streetShow" round position="bottom" :style="{ height: '80%' }">
      <div class="m-dialog1">
        <van-nav-bar title="选择街道" class="pcStyle_ydT">
          <template #left>
            <span>
              <van-icon name="arrow-left" size="18" @click.native="streetShow = false" color="#333" />
            </span>
          </template>
        </van-nav-bar>
        <van-cell :border="false" center is-link v-for="(item, i) in districtVal" :key="i"
          @click.native="streetConfirm(item)" title-style="text-align:left">
          <span slot="title">{{ item.areaname }}</span>
        </van-cell>
      </div>
    </van-popup>
    <!-- 街道选择器 end -->
  </div>
</template>

<script>
import demand_controller from "./demand_controller";
export default demand_controller
</script>

<style scoped lang="scss">
.b-60 {
  bottom: -1.875rem !important;
}
.pb-200{
  padding-bottom: 6.25rem;
}
.reject {
  display: flex;
  flex-direction: column;
}

.reject-content {
  padding: 1.125rem;
  background: #fff;
  color: black;
  word-break: break-all;
  text-align: left;
  margin-bottom: 1rem;
}

.republish {
  margin-top: 2.1875rem;
  background: #fff;
  text-align: right;
  padding: 0.875rem;
}

.republish-submit {
  display: block;
  border-radius: 100px;
  background: #4978f8;
  color: #fff;
  font-size: 0.875rem;
  padding: 0.7rem 0.65rem;
  text-align: center;
}

.republish-btn {
  border-radius: 100px;
  background: #4978f8;
  color: #fff;
  font-size: 0.875rem;
  padding: 0.3125rem 0.65rem;
}

::v-deep .catrogey-popuop .van-cell__title {
  text-align: left;
}

::v-deep .catrogey-popuop .van-radio__icon--checked .van-icon {
  color: #1989fa;
  background-color: unset;
  border-color: unset;
}

::v-deep .catrogey-popuop .van-icon {
  border: unset;
}

::v-deep .time-indate {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #f7f7f7;
  height: 2.75rem;
  overflow: hidden;
  border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
}

::v-deep .time-indate .van-picker__columns {
  background: #f7f7f7;
}

::v-deep .time-indate .van-picker__columns .van-picker-column:first-child {
  position: relative;
  overflow: unset;

  &::after {
    position: absolute;
    content: ":";
    top: 50%;
    right: -80%;
    transform: translate(-50%, -50%);
    color: #999;
    font-size: 1.25rem;
  }
}

::v-deep .time-indate .van-picker-column {
  margin: 0 1.0625rem;
}

::v-deep .time-indate .van-picker__toolbar {
  display: none;
}

.manage-demand {
  min-height: 100vh;
  position: relative;

  .name-box {
    position: relative;
  }

  .name-photo {
    position: absolute;
    left: 22%;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 100px;
  }

  .reject-btn {
    color: #fff;
    background: #4978f8;
    border-radius: 1.0938rem;
    display: inline-block;
    padding: 0.2188rem 0.625rem;
  }

  .show-order {
    color: #ff9c43;
    border: 1px solid #ff9c43;
    border-radius: 1.0938rem;
    display: inline-block;
    padding: 0.2188rem 0.625rem;
  }

  .mb-31 {
    margin-bottom: 0.9688rem;
  }

  .search-tip {
    position: relative;
    width: 13.625rem;
    height: 4.6875rem;
    background: #fff;
    border-radius: 0.125rem 0.125rem 0.125rem 0.125rem;
    border: 1px solid #ececec;
    margin: 0.3125rem auto;

    .box {
      height: 100%;
      padding: 0.8438rem 0.3125rem 0.5625rem 0.4375rem;
      overflow-y: scroll;
    }

    &::after {
      content: "";
      width: 0;
      height: 0;
      border: 12px solid;
      position: absolute;
      top: -23px;
      left: 20px;
      border-color: #fff transparent transparent transparent;
      transform: rotate(180deg);
    }

    &::before {
      content: "";
      width: 0;
      height: 0;
      border: 12px solid;
      position: absolute;
      top: -25px;
      left: 20px;
      border-color: #ececec transparent transparent transparent;
      transform: rotate(180deg);
    }
  }

  .calendar {
    border-radius: unset;
    box-shadow: unset;
  }

  .fw-bold {
    font-weight: bold;
  }

  .c999 {
    color: #999;
  }

  .p32-40 {
    padding: 1rem 1.25rem;
  }

  .fz24 {
    font-size: 0.8rem;
  }

  .fz30 {
    font-size: 1rem;
  }

  .flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .btn {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 0.625rem 0.75rem;
  }

  .tip {
    font-size: 1.5rem;
    padding: 1.1563rem 0.6563rem;
    text-align: left;
    font-weight: 500;
  }
}
</style>
